import { NavigationContainer } from '@react-navigation/native'
import React, { Component } from "react"
import {View,Text,Dimensions,StyleSheet,ImageBackground,Image,TouchableOpacity,TextInput} from "react-native"
const {width,height,scale}= Dimensions.get('window')

export default class Home extends Component{
   
    // constructor(props) {
    //     super(props);
    //   }
       render(){
        return(
            <View style={{flex:1}}>
                <View style={styles.BOX}>
                    <TextInput style={styles.textinput1} placeholder="请输入账号"></TextInput>
                    <TextInput style={styles.textinput2} placeholder="请输入密码"></TextInput>
                </View>
                <View style={styles.container}>
                    <TouchableOpacity style={styles.box1} ><Text style={styles.text1}>登录</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.box1} onPress={() => this.props.navigation.navigate('Zc')}><Text style={styles.text1}>注册</Text></TouchableOpacity>
                </View>
                {/* <View style={styles.bottom}>
                        <View style={styles.Box}>
                            <View style={styles.line}></View>
                            <Text style={styles.text2}>其他方式登录</Text>
                            <View style={styles.line}></View>
                        </View>
                            <View style={styles.box2}>
                                <TouchableOpacity style={styles.box3}><Image source={{uri:'qqdl'}} style={styles.tpbox}/></TouchableOpacity>
                                <TouchableOpacity style={styles.box3}><Image source={{uri:'wbdl'}} style={styles.tpbox}/></TouchableOpacity>
                                <TouchableOpacity style={styles.box3}><Image source={{uri:'wxdl'}} style={styles.tpbox}/></TouchableOpacity>
                            </View>
                </View> */}
            </View>
        );
    };
}

const styles = StyleSheet.create({
    container:{
        flexDirection:"row",
        width:"100%",
        justifyContent:"space-around",
        marginTop:150,
    },
    box1:{
        backgroundColor:"green",
        borderRadius:20,
        width:75,
        height:41,
        alignItems:"center",
        justifyContent:"center",
        borderWidth:2,
    },
    text1:{
        color:"white",
        fontSize:15,
    },
    bottom:{
        position:"absolute",
        bottom:65,
        width:"100%",
        alignItems:"center",
    },
    line:{
        height:1,
        width:100,
        backgroundColor:"white",
    },
    text2:{
        color:"white",
        width:110,
        textAlign:"center",
        fontSize:10,
        marginTop:-10,
        borderRadius:30
    },
    tpbox:{
        width:50,
        height:50,
        borderRadius:50,
        borderWidth:2,
    },
    box2:{
        flexDirection:"row",
        marginTop:30,
    },
    box3:{
        paddingRight:10,
        paddingLeft:10,
        borderWidth:2,
    },
    Box:{
        flexDirection:"row",
        width:width*0.8,
        justifyContent:"center"
    },
    BOX:{
        alignItems:"center"
    },
    textinput1:{
        width:width*0.6,
        height:40,
        borderRadius:20,
        borderWidth:2, 
        marginTop:200
    },
    textinput2:{
        width:width*0.6,
        height:40,
        borderRadius:20,
        borderWidth:2,
        marginTop:20
    }
})
